<template>
  <view class="page">
    <view class="ding_">
      <picker mode="date" start="" end="" :value="date" fields="day" @change="bindDateChange" class="ding_xzrq">
        <view class="ding_xuanzeqi">
          <view>选择日期</view>
          <view>
            <image class="dsj" src="/static/img/倒三角.png"></image>
          </view>
        </view>
      </picker>

      <view class="ding_kyyd">
        <view class="kyyd"></view>
        <view>可以预定</view>
      </view>

      <view class="ding_bkyyd">
        <view class="bkyyd"></view>
        <view>不可以预定</view>
      </view>
    </view>

    <view class="hang">
      <view class="kuai" v-for="(rqk, index) in riqikuai" :key="index">
        <view>{{ rqk.rq }}({{ rqk.xq }})</view>
      </view>
    </view>

    <view class="container">
      <view class="menu">
        <block v-for="(item, index) in menuItems" :key="index">
          <view class="menu-item" @tap="handleMenuItem">{{ item }}</view>
        </block>
      </view>
      <view class="content">
        <!-- 主内容区 -->
        <view class="list_sjhl">
          <view @tap="toggleIndex" :class="item.currentIndex == '0' ? 'sjh' : 'sjl'" :data-index="index"
                v-for="(item, index) in listshijian" :key="index">
            <view>{{ item.sj }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// pages/fangtai/fangtai.js
var app = getApp();
import {fangtaifangjianlist} from "@/common/api";

export default {
  data() {
    return {
      riqikuai: [
        {
          rq: '04.23',
          xq: '日'
        },
        {
          rq: '04.24',
          xq: '一'
        },
        {
          rq: '04.25',
          xq: '二'
        },
        {
          rq: '04.26',
          xq: '三'
        },
        {
          rq: '04.27',
          xq: '四'
        },
        {
          rq: '04.28',
          xq: '五'
        }
      ],

      listshijian: [
        {
          sj: '00:00',
          currentIndex: '0'
        },
        {
          sj: '00:30',
          currentIndex: '1'
        },
        {
          sj: '01:00',
          currentIndex: '1'
        },
        {
          sj: '01:30',
          currentIndex: '1'
        },
        {
          sj: '02:00',
          currentIndex: '1'
        },
        {
          sj: '02:30',
          currentIndex: '1'
        },
        {
          sj: '03:00',
          currentIndex: '1'
        },
        {
          sj: '03:30',
          currentIndex: '1'
        },
        {
          sj: '04:00',
          currentIndex: '1'
        },
        {
          sj: '04:30',
          currentIndex: '1'
        },
        {
          sj: '05:00',
          currentIndex: '1'
        },
        {
          sj: '05:30',
          currentIndex: '1'
        },
        {
          sj: '06:00',
          currentIndex: '1'
        },
        {
          sj: '06:30',
          currentIndex: '1'
        },
        {
          sj: '07:00',
          currentIndex: '1'
        },
        {
          sj: '07:30',
          currentIndex: '1'
        },
        {
          sj: '08:00',
          currentIndex: '1'
        },
        {
          sj: '08:30',
          currentIndex: '1'
        },
        {
          sj: '09:00',
          currentIndex: '1'
        },
        {
          sj: '09:30',
          currentIndex: '1'
        },
        {
          sj: '10:00',
          currentIndex: '1'
        },
        {
          sj: '10:30',
          currentIndex: '1'
        },
        {
          sj: '11:00',
          currentIndex: '0'
        },
        {
          sj: '11:30',
          currentIndex: '1'
        },
        {
          sj: '12:00',
          currentIndex: '1'
        },
        {
          sj: '12:30',
          currentIndex: '1'
        },
        {
          sj: '13:00',
          currentIndex: '1'
        },
        {
          sj: '13:30',
          currentIndex: '1'
        },
        {
          sj: '14:00',
          currentIndex: '1'
        },
        {
          sj: '14:30',
          currentIndex: '1'
        },
        {
          sj: '15:00',
          currentIndex: '1'
        },
        {
          sj: '15:30',
          currentIndex: '1'
        },
        {
          sj: '16:00',
          currentIndex: '1'
        },
        {
          sj: '16:30',
          currentIndex: '1'
        },
        {
          sj: '17:00',
          currentIndex: '1'
        },
        {
          sj: '17:30',
          currentIndex: '1'
        },
        {
          sj: '18:00',
          currentIndex: '1'
        },
        {
          sj: '18:30',
          currentIndex: '1'
        },
        {
          sj: '19:00',
          currentIndex: '1'
        },
        {
          sj: '19:30',
          currentIndex: '1'
        },
        {
          sj: '20:00',
          currentIndex: '1'
        },
        {
          sj: '20:30',
          currentIndex: '1'
        },
        {
          sj: '21:00',
          currentIndex: '1'
        },
        {
          sj: '21:30',
          currentIndex: '1'
        },
        {
          sj: '22:00',
          currentIndex: '1'
        },
        {
          sj: '22:30',
          currentIndex: '1'
        },
        {
          sj: '23:00',
          currentIndex: '1'
        },
        {
          sj: '23:30',
          currentIndex: '1'
        }
      ],

      menuItems: ['雀胜', '雀喜', '雀美', '雀悦', 'VIP'],

      // 菜单项数据
      // 主内容区域的内容
      content: '',

      date: '',

      rqk: {
        rq: '',
        xq: ''
      }
    };
  }
  /**
   * 生命周期函数--监听页面加载
   */,
  onLoad(options) {

  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.getfangtaifangjianlist()
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  },
  methods: {
    toggleIndex: function (event) {
      const index = event.currentTarget.dataset.index; // 获取点击的索引
      const currentStatus = this.listshijian[index].currentIndex; // 获取当前状态

      // 切换状态
      this.setData({
        [`listshijian[${index}].currentIndex`]: currentStatus === '0' ? '1' : '0'
      });
    },

    toggleMenu() {
      // 这里添加菜单切换的逻辑
    },

    bindDateChange() {
      console.log('占位：函数 bindDateChange 未声明');
    },

    handleMenuItem() {
      console.log('占位：函数 handleMenuItem 未声明');
    },
    getfangtaifangjianlist() {
      const param = {
        page: this.page,
        limit: this.limit,
        store_id: app.globalData.store_id
      }
      fangtaifangjianlist(param, (res => {
        console.log("fangtaifangjianlist fangtaifangjianlist")
        console.log(res)
      }))
    }
  }
};
</script>
<style>
.page {
  height: 100vh;
  background-color: rgb(241, 241, 241);
}

.dsj {
  width: 50rpx;
  height: 50rpx;
}

.ding_xzrq {
  border: 1rpx solid rgb(190, 190, 190);
  width: 200rpx;
  padding-left: 20rpx;
}

.ding_xuanzeqi {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ding_ {
  padding: 20rpx;
  display: flex;
}

.ding_kyyd {
  display: flex;
  align-items: center;
  margin-left: 20rpx;
  font-size: 28rpx;
}

.kyyd {
  width: 80rpx;
  height: 40rpx;
  background-color: rgb(34, 170, 16);
  margin-right: 10rpx;
}

.ding_bkyyd {
  display: flex;
  align-items: center;
  margin-left: 20rpx;
  font-size: 28rpx;
}

.bkyyd {
  width: 80rpx;
  height: 40rpx;
  background-color: rgb(219, 31, 31);
  margin-right: 10rpx;
}

.hang {
  height: 80rpx;
  white-space: nowrap; /* 让内容不换行 */
  overflow-x: auto; /* 允许水平滚动 */
  overflow-y: hidden; /* 隐藏垂直滚动条 */
  margin-bottom: 3rpx;
}

.kuai {
  background-color: rgb(255, 255, 255);
  padding: 20rpx;
  font-size: 28rpx;
  display: inline-block; /* 内部元素水平排列 */
  white-space: normal; /* 恢复内部元素的正常换行 */
  border-radius: 5rpx;
  margin-right: 3rpx;
}

.container {
  display: flex;
  height: 100%;
}

.menu {
  width: 160rpx;
  height: 100%;
  color: rgb(66, 66, 66);
}

.menu-item {
  background-color: rgb(255, 255, 255);
  padding: 15px;
  margin-bottom: 3rpx;
  cursor: pointer; /* 添加鼠标指针样式 */
}

.list_sjhl {
  display: flex;
  flex-wrap: wrap; /* 允许子元素换行 */
}

.sjl {
  background-color: rgb(29, 202, 6);
  color: rgb(255, 255, 255);
  font-size: 28rpx;
  margin: 3rpx;
  width: 110rpx;
  padding: 20rpx 15rpx 20rpx 30rpx;
  border-radius: 5rpx;
}

.sjh {
  background-color: rgb(219, 31, 31);
  color: rgb(255, 255, 255);
  font-size: 28rpx;
  margin: 3rpx;
  width: 110rpx;
  padding: 20rpx 15rpx 20rpx 30rpx;
  border-radius: 5rpx;
  text-decoration: line-through;
}
</style>
